<template>
    <fieldset>
        <legend>tab切换</legend>
        <!-- <button class="tab-button active">1</button>
        <button class="tab-button">2</button>
        <button class="tab-button">3</button> -->
        <!-- 高亮 :class="['tab-button',{active:index===selecteBtn}]"-->
        <!-- 切换内容 :is -->
        <button v-for="index in buttons" :key="index" :class="['tab-button',{active:index===selecteBtn}]"
        @click="handleClick(index)">{{index}}</button>
        <div class="tab" :is="dynimac">
            123
        </div>
    </fieldset>
</template>
<script>
import email from "./email.vue"
import home from "./home.vue"
import mine from "./mine.vue"
export default{
    components:{
        email,
        home,
        mine,
    },
    data(){
        return{
            buttons:['email','home','mine'],
            selecteBtn:"email",
        }
    },
    methods: {
        handleClick(index){
            console.log(index)
            this.selecteBtn= index
        }
    },
    computed:{
        dynimac(){
            return  this.selecteBtn
        }
    },
}
</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>
